<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")

    <link rel="stylesheet" href="/static/ajax/libs/codemirror/5.58.2/codemirror.css"/>

    <script src="/static/ajax/libs/codemirror/5.58.2/codemirror.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldgutter.css"/>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldcode.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/foldgutter.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/brace-fold.js"></script>
    <script src="/static/ajax/libs/codemirror/5.58.2/addon/fold/comment-fold.js"></script>


    <!--    sqlformatter-->
    <script src="/static/ajax/libs/sql-formatter/2.3.3/sql-formatter.min.js"></script>

    <style>
        .CodeMirror {
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>

<div class="container">
    #include("../include/menu.html")

    <div class="row" style="margin-bottom: 10px">

        <div class="col-sm-6">
            <!-- begin code -->
            <textarea class="form-control" id="codeInput" name="codeInput"></textarea>
            <!-- end code-->
        </div>
        <div class="col-sm-6">
            <!-- begin code -->
            <!-- end code-->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="margin:10px 0;">
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon2">Class</span>
                        <input type="text" class="form-control" placeholder="Class" aria-describedby="sizing-addon2"
                               value="JsonRootBean">

                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon3">Package</span>
                        <input type="text" class="form-control" placeholder="Package"
                               aria-describedby="sizing-addon3"
                               value="cn.json.pojo">
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group">
                            <button type="button" class="btn btn-info" onclick="genCode()">生成代码</button>
                            <button type="button" class="btn btn-success" onclick="downCode()">下载代码</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

#include("../include/footer.html")

<script>
    var codeInputEditor;

    $(function () {
        //根据DOM元素的id构造出一个编辑器
        codeInputEditor = initCodeMirror(document.getElementById("codeInput"));
        codeInputEditor.setValue("{\n" +
            "            \"Array\": [1, 2, 3],\n" +
            "            \"Boolean\": true,\n" +
            "            \"Null\": null,\n" +
            "            \"Number\": 123,\n" +
            "            \"Object\": {\"a\": \"b\", \"c\": \"d\"},\n" +
            "            \"String\": \"Hello World\"\n" +
            "        }");

    });

    function initCodeMirror(el) {
        return CodeMirror.fromTextArea(el, {
            lineNumbers: true,	//显示行号
            theme: "dracula",	//设置主题
            lineWrapping: true,	//代码折叠
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            matchBrackets: true,	//括号匹配

            mode: "application/json",
            //readOnly: true,        //只读
        });

    }

    function genCode() {
        $.post('/gen/json2java', {json: codeInputEditor.getValue()}, function (data, status, xhr) {
            if (data && data.result === 100 && data.data) {
                console.log(data.data);
            }
        });
    }

    function downCode() {
    }

</script>
</body>
</html>